Use containment in layouts 在佈局中使用“內容容器”概念

Containment 是透過視覺邊界（如線條或顏色）將內容限制在特定區域的方法，從而使頁面更加整潔有序。它能有效地劃分內容、增強視覺層次、突出重要資訊。

1.Dividers（分隔線）

功能：快速分開彼此無關的內容區塊。

案例：在 dog walker app 中，每位狗遛者之間使用了灰色的分隔線，幫助使用者清楚地區分不同的選項。

2.Borders（邊框）

功能：用閉合的線條圍出特定區域，常用於按鈕或卡片式設計。

案例：最初 “choose-a-time” 按鈕中僅有文字與狗狗影象，沒有邊框，導致使用者難以識別它是一個可點選的按鈕。加上邊框後，互動意圖變得清晰。

3.Fill（填充色）

功能：透過顏色填充按鈕或區域，吸引注意力、突出某個功能點。

案例：設計師給 “choose-a-time” 按鈕新增了橙色填充色，使按鈕更醒目，有助於使用者辨認操作入口。

4.Shadow（陰影）

功能：營造出立體感和分層感，使元素看起來像“浮”在頁面之上。

案例：按鈕加上陰影后產生了立體效果，更有點選的“重量感”。